<template>
      <password-update>

</password-update>
  <el-row>
    <el-col :span="20">
      <div class="contentss" ref="pageBlock">
    <div data-section="基础信息" data-ismain></div>
    <div data-section="个人信息" data-for="form1"></div>
    <formOne  ref="form1" v-model:form="formMap.form1"></formOne>
    <div data-section="高级信息" data-ismain></div>
    <div data-section="公司信息" data-for="form2"></div>
    <formTwo ref="form2" v-model:form="formMap.form2"></formTwo>
    <el-button type="primary" @click="submitForms()">
        Create
      </el-button>
      <el-button @click="resetForm()">Reset</el-button>
    </div>
    </el-col>
    <el-col :span="4">
      <anchor v-if="pageBlocks" ref="anchors" :pageBlock="pageBlocks">
    <template #default>
    </template>
  </anchor>
    </el-col>
  </el-row>



</template>

<script lang="ts" setup name="Index">
//设计思路是把dom传输到锚点组件
import { reactive, ref ,defineProps,computed,defineEmits,onMounted,getCurrentInstance} from 'vue'
import formTwo from './components/formTwo/index'
import formOne from './components/formOne/index'
import anchor from '@/components/common/anchor/anchor/index'
import passwordUpdate from './components/password-update'
import anchorItem from '@/components/common/anchor/anchorItem'

import type { FormInstance, FormRules } from 'element-plus'
interface anchorList {
  label: string,
  index: string,
isMain:boolean
}
interface cz{
list:anchorList[]
}
let form1 = ref(null)
let form2 = ref()
let anchors=ref(null)
let pageBlock =ref(null)
let formMap = reactive({
  form1: {
    name: '',
    region: '',
  },
  form2: {
    name2: '',
    region2: '',
  },
})
const {proxy}=getCurrentInstance()
const submitForms = async () => {
  //获取表单名字
  const formKeys = Object.keys(formMap)
//循环遍历子组件的校验结果
  const validResults =  await Promise.all(formKeys.map(async item => {
    let result = await proxy.$refs[item].submitForm()
    return result
  }))
  //循环获取data-for= form1 form2 的名字
  formKeys.map((formKey, index) => {
    const section = pageBlocks.value.querySelector(`[data-for=${formKey}]`)
  console.log(section);
  //判断通没通过，没通过的设置data-tip
    if (!validResults[index]) {
    console.log(12);
    
    section?.setAttribute('data-tip', '')
    } else {
      console.log(2121);
    section?.removeAttribute('data-tip')
    }
    anchors.value.reRender()
})
  console.log(validResults);
  // console.log(result1);
  if (!form1) return
  // await formEl.validate((valid, fields) => {
  //   if (valid) {
  //     console.log('submit!')
  //   } else {
  //     console.log('error submit!', fields)
  //   }
  // })
}


const resetForm = () => {
  // if (!formEl) return
  // formEl.resetFields()
}
let pageBlocks =ref(null)
onMounted(() => {
  // nextTick(() => {
  pageBlocks.value = pageBlock.value
    console.log(pageBlocks.value);
    
  // })
})
</script>
<style lang="scss" scoped>
.contentss{
  height: 20vh;
  overflow-y: scroll;
}
.form-wrapper {
  position: relative;
  width: 100%;
  // 设置小的高度，为了更容易产生滚动进行测试
  height: 280px; 
  padding: 16px;
  overflow-y: auto;
  ::v-deep input {
    width: 280px;
  }
}
.anchor-wrapper {
  position: fixed;
  right: 0px;
  width: 220px;
  height: 300px;
  top: 30%;
  transform: translate(0, -50%);
}
div[data-section] {
  position: relative;
  font-size: 14px;
  font-weight: bold;
  color: #5c658d;
  padding: 14px 0;
  margin-left: 34px;
  &::before {
    content: attr(data-section);
  }
}
div[data-ismain] {
  font-size: 16px;
  font-weight: bold;
  margin-left: 28px;
  &::after {
    content: '';
    position: absolute;
    left: -16px;
    top: 14px;
    width: 4px;
    height: 16px;
    background: #5c658d;
    border-radius: 2px;
  }
}
</style>
